<template>
  <div>
    <h2>state:{{ $store.state.count }}----{{ $store.state.hi }}</h2>
    <h2>计算getter:{{ $store.getters.num }}</h2>
    <button @click="changeCount">mutations:更改count</button>
    <button @click="changeAct">action触发方法</button>

    <h2>{{ $store.state.user.userName }}</h2>
  </div>
  <!-- 
   vuex中数据的单向流动
   视图 → dispatch (action) → commit (mutation) → 修改 state → 视图更新。
   -->
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    changeCount() {
      // 非严格模式下 
      // commit 触发同步变更：直接修改 state，必须同步。
      this.$store.commit("CHANGE_COUNT", 20)
    },
    changeAct() {
      //调用action里的方法 
      // dispatch 触发异步逻辑：处理异步操作，最终通过 commit 提交变更。
      this.$store.dispatch('handleChange', "hhh")
      // 调用子模块中子模块中的方法
      this.$store.dispatch("user/changeName", '戴拿')
    }
  },
  created() {
    // this.$store.state将vuex中的state数据取出来
    console.log(this.$store.state.count);
    // 调用子模块user的变量
    console.log(this, this.$store.state.user.userName);

  }
}
</script>

<style lang="scss" scoped></style>